<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网站监测列表</title>
    <style>
        .no-style-link {
            text-decoration: none;
            color: inherit;
        }
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .search-box {
            margin-bottom: 20px;
            display: flex;
        }
        .search-box input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        .search-box button {
            padding: 10px 20px;
            margin-left: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        tr:hover {
            background-color: #f9f9f9;
        }
        .status-active {
            color: #4CAF50;
        }
        .status-inactive {
            color: #f44336;
        }
        .action-btn {
            padding: 5px 10px;
            margin-right: 5px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
        .edit-btn {
            background-color: #2196F3;
            color: white;
        }
        .delete-btn {
            background-color: #f44336;
            color: white;
        }
        .switch {
          position: relative;
          display: inline-block;
          width: 70px;
          height: 34px;
        }

        .switch input {
          opacity: 0;
          width: 0;
          height: 0;
        }

        .slider {
          position: absolute;
          cursor: pointer;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: #ccc;
          transition: .4s;
          border-radius: 34px;
        }

        .slider:before {
          position: absolute;
          content: "";
          height: 26px;
          width: 26px;
          left: 0px;
          bottom: 4px;
          background-color: white;
          transition: .4s;
          border-radius: 50%;
          z-index: 2;
        }

        .slider:after {
          position: absolute;
          content: "暂停";
          height: 100%;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          font-weight: bold;
          color: white;
          transition: .4s;
        }

        input:checked + .slider {
          background-color: #2196F3;
        }

        input:checked + .slider:before {
          transform: translateX(44px);
        }

        input:checked + .slider:after {
          content: "监测";
        }






    </style>
</head>
<body>
<div class="container">
    <h1>网站监测列表</h1>
    <div class="search-box">
        <input type="text" id="searchInput" placeholder="输入网站名称或链接搜索...">
        <button onclick="searchData()">搜索</button>
        <a href="create_website">
            <button id="myBtn">创建网站</button>
        </a>
    </div>
    <table>
        <thead>
        <tr>
            <th>序号</th>
            <th>网站名称</th>
            <th>网站链接</th>
            <th>节点数量</th>
            <th>品牌</th>
            <th>图片分类</th>
            <th>监测状态</th>
            <th>采集数量</th>
            <th>最新采集时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {% for obj in website_lis %}
        <tr>
            <td>1</td>
            <td>{{obj.website_name}}</td>
            <td>{{obj.website_url}}</td>
            <td>{{obj.column_count}}</td>
            <th>{{obj.brand}}</th>
            <th>{{obj.menu}}</th>
            <td>
                <label class="switch" id="status_checkbox">
                    <input onclick="UpStatus(this)" data-id="{{obj.website_id}}" type="checkbox" {% if obj.collect_status is 1%} checked {%endif%}>
                    <span class="slider"></span>
                </label>
            </td>
            <td>{{obj.crawl_count}}</td>
            <td>{{obj.create_time}}</td>
            <td>
                <button class="action-btn edit-btn"><a href="/edit_website_config?website_id={{obj.website_id}}" class="no-style-link">编辑</a></button>
                {% if obj.website_type == 1%}
                <button class="action-btn put-btn" data-id="{{obj.website_id}}">上传</button>
                {%elif obj.website_type == 0%}
                <button class="action-btn child-btn"><a href="website/node_list?website_id={{obj.website_id}}" class="no-style-link">节点</a></button>
                {%endif%}
                <button class="action-btn delete-btn" onclick="DeleteConfig(this)" data-id="{{obj.website_id}}">删除</button>
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% if parmas.msg %}
<script>alert("{{ parmas.msg }}");</script>
{% endif %}
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
<script>
    function searchData() {
        const input = document.getElementById('searchInput');
        const filter = input.value.toUpperCase();
        const table = document.querySelector('table');
        const tr = table.getElementsByTagName('tr');

        for (let i = 1; i < tr.length; i++) {
            const td1 = tr[i].getElementsByTagName('td')[1];
            const td2 = tr[i].getElementsByTagName('td')[2];
            if (td1 || td2) {
                const txtValue1 = td1.textContent || td1.innerText;
                const txtValue2 = td2.textContent || td2.innerText;
                if (txtValue1.toUpperCase().indexOf(filter) > -1 ||
                    txtValue2.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }

    function UpStatus(e){
        const status = $(e)[0].checked;
        const item_id = $(e).attr('data-id');
        if (status === true){
            collect_status = 1
        } else{
            collect_status = 0
        }
        $.ajax({
            url: '/update_website_collect_status',
            type: 'get',
            data: {'website_id': item_id, 'collect_status': collect_status},
            success: function (res) {
                if (res.code===200){
                    console.log('更新状态')
                }else if (res.code===400){
                    alert(res.message)
                }else {
                    alert('系统异常')
                }
            }
        })
    }

    function DeleteConfig(e){
        const item_id = $(e).attr('data-id');
        $.ajax({
            url: '/delet_website_config',
            type: 'get',
            data: {'website_id': item_id},
            success: function (res) {
                if (res.code===200){
                    alert(res.message)
                    location.reload()
                }else if (res.code===400){
                    alert(res.message)
                }else {
                    alert('系统异常')
                }
            }
        })
    }



</script>
</body>
</html>
